<template>
    <div>

   <label for="">商品名称</label>
    <input type="text" name="" id="" v-model="name" />
    <label for="">商品价格</label>
    <input type="text" name="" id="" v-model.number="price" />
    <button @click="addGoods">点击添加商品</button>
    <button @click="allDelete">全部删除</button>

    </div>
</template>

<script>
export default {
    data() {
        return {
          // id:0,
             name: "",
        price: "",

        };
    },
    created() {

    },
    mounted() {

    },
    methods: {
            //添加商品
    addGoods() {
      if (!this.name.trim()) {
        alert("商品名称不能为空");
        return;
      }
      if (this.price < 0) {
        alert("商品价格不能为负数");
        this.price = "";
        return;
      }

      
      if (typeof this.price != "number") {
        alert("商品价格必须是数字");
        this.price = "";
        return;
      }

      let id = Math.random();
     

      let obj = { id: id, name: this.name, price: this.price };

      console.log(obj);
         this.$emit('add-my-goods',obj)
      
    },

    allDelete() {
      this.$emit('myallDelete')
    }

    }
};
</script>

<style scoped   lang='css'>

</style>
